import React from "react";
import { useSelector } from "react-redux";

import clsx from "clsx";

import Typography from "@material-ui/core/Typography";

import { useTranslation } from "react-i18next";
import { ReduxStoreTypes } from "../../stores/rootStore";

interface FooterProps {
  footerShadow?: boolean;
  footerBgTransparent?: boolean;
  footerFixed?: boolean;
}

const Footer = (props: FooterProps) => {
  const themeConfig = useSelector(
    (state: ReduxStoreTypes) => state.themeOptions
  );
  const { t } = useTranslation();
  const { footerShadow, footerBgTransparent } = themeConfig;

  return (
    <>
      <Typography
        component="span"
        variant="body1"
        className={clsx("app-footer text-black-50", {
          "app-footer--shadow": footerShadow,
          "app-footer--opacity-bg": footerBgTransparent,
        })}
      >
        <div className="app-footer--first">
          <div className="footer-container">
            <Typography
              className="rounded-sm font-size-md cursor-pointer"
              color="textPrimary"
            >
              {t("footer:home")}
            </Typography>
            <Typography
              className="rounded-sm font-size-md cursor-pointer"
              color="textPrimary"
            >
              {t("footer:wallets")}
            </Typography>
            <Typography
              color="textPrimary"
              className="rounded-sm font-size-md cursor-pointer"
            >
              {t("footer:terms")}
            </Typography>
            <Typography
              className="rounded-sm font-size-md cursor-pointer"
              color="textPrimary"
            >
              {t("footer:faq")}
            </Typography>
          </div>
        </div>
        <div className="app-footer--second">
          <Typography
            color="textPrimary"
            className="font-size-md footer-right-text"
          >
            {t("footer:allright_footer")}
            <Typography
              component="span"
              color="textPrimary"
              className="font-weight-bold"
            >
              Bitbine.com
            </Typography>{" "}
            copyright © 2020{" "}
          </Typography>
        </div>
      </Typography>
    </>
  );
};

export default Footer;
